import React, { useEffect, useState } from 'react';
import { useTitle } from 'ahooks';
import { Empty, Typography, Spin, Pagination } from 'antd';
import { useSearchParams, useNavigate } from 'react-router-dom';
const { Title } = Typography;
import styles from './List.module.scss';
import QuestionCard from '../../components/QuestionCard';
import ListSearch from '../../components/ListSearch';
import useLoadQuestionListData from '../../Hooks/useLoadQuestionListData';

export default function Star() {
    useTitle('小菌问卷-星标问卷');
    const navigate = useNavigate();
    const { data = {}, loading } = useLoadQuestionListData({ isStar: true });
    const { list = [], total = 0 } = data as any;
    const [searchParams] = useSearchParams();
    const [current, setCurrent] = useState(
        parseInt(searchParams.get('current') || '1') || 1
    );
    // const [current, setCurrent] = useState(1);
    const onChange = (page: number) => {
        setCurrent(page);
        searchParams.set('current', page.toString());
        navigate({
            pathname: '/manage/star',
            search: searchParams.toString(),
        });
    };
    return (
        <div className={styles.container}>
            <div className={styles.header}>
                <div className={styles.left}>
                    <Title level={3}>星标问卷</Title>
                </div>
                <div className={styles.right}>
                    <ListSearch />
                </div>
            </div>
            {!loading && list.length === 0 && <Empty />}
            <div className={styles.list}>
                {loading && (
                    <div style={{ textAlign: 'center' }}>
                        <Spin />
                    </div>
                )}
                {list.map((item: any) => (
                    <QuestionCard key={item._id} {...item} />
                ))}
            </div>
            <div className={styles.footer}>
                <Pagination
                    align="center"
                    defaultCurrent={1}
                    current={current}
                    onChange={onChange}
                    total={total}
                />
            </div>
        </div>
    );
}
